<!-- 上传文件 -->
<template>
	<div class="content">
		<el-upload
			action
			:before-upload="beforeAvatarUpload"
			:http-request="Upload"
			:on-preview="handlePreview"
			:on-remove="handleRemove"
			:on-success="handleSuccess"
			:on-exceed="handleExceed"
			drag
			:limit="limit"
			:file-list="fileList"
		>
			<i class="el-icon-upload"></i>
			<div class="el-upload__text">
				将文件拖到此处，或
				<em>点击上传</em>
			</div>
			<div
				slot="tip"
				class="el-upload__tip"
			>上传文件大小不能超过 30M</div>
		</el-upload>

		<el-progress
			v-show="showProgress"
			:text-inside="true"
			:stroke-width="15"
			:percentage="progress"
		></el-progress>
	</div>
</template>

<script>
	import aliOss from './ali-oss'
	export default {
		name: 'ossUpload',
		props: {
			limit: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				fileList: [], //文件列
				showProgress: false, //进度条的显示
				dataObj: {}, //存签名信息
				progress: 0 //进度条数据
			}
		},
		created() {
			this.oss = new aliOss()
		},
		methods: {
			// 文件超出个数限制时的钩子
			handleExceed(files, fileList) {
				this.$message.warning(`每次只能上传 ${this.limit} 个文件`)
			},
			// 点击文件列表中已上传的文件时的钩子
			handlePreview(file) {},
			// 删除文件之前的钩子
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${file.name}？`)
			},
			// 文件列表移除文件时的钩子
			handleRemove(file, fileList) {
				this.showProgress = false
				this.progress = 0
			},
			// 文件上传成功时的钩子
			handleSuccess(response, file, fileList) {
				this.fileList = fileList
			},
			//文件上传前的校验
			beforeAvatarUpload(file) {
				const isLt30M = file.size / 1024 / 1024 < 30
				const isLt30 = file.name.length < 100
				// if (['application/pdf'].indexOf(file.type) == -1) {
				// 	this.$message.error('请上传正确的文件格式')
				// 	return false
				// }
				if (!isLt30M) {
					this.$message.error('上传视频大小要小于30M哦!')
					return false
				}
				if (!isLt30) {
					this.$message.error('上传视频文件名称长度必须要小于100个文字哦!')
					return false
				}
				this.showProgress = false
				this.progress = 0
				return true
			},
			// http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现
			Upload(file) {
				this.showProgress = true
				this.oss
					.upload(file.file, p => {
						this.progress = Math.floor(p * 100)
					})
					.then(res => {
						//上传成功返回值，可针对项目需求写其他逻辑
						this.$emit('input', [{ name: res.name, etag: res.etag }])
					})
					.catch(err => {
						console.log('err:', err)
					})
			}
		}
	}
</script>
